<template>
  <div class="goodsLi" id="app" >
    <div  class="goods" v-for="item in goods">
      <img :src="item.img" alt="" class="fm">
      <div class="row">
        <div class="t1">{{item.title}}</div>
        <div class="t5">{{item.size}}</div>
        <div class="startLi" >
          <img class="start" src="../assets/星形%201.png" alt="">
          <img class="start" src="../assets/星形%201.png" alt="">
          <img class="start" src="../assets/星形%201.png" alt="">
          <img class="start" src="../assets/星形%201.png" alt="">
          <img class="start" src="../assets/星形%201.png" alt="">
        </div>
      </div>
    </div>
    <slot></slot>
    <slot name="msg"></slot>
 </div>
</template>

<script>
export default {
  name: "RowGoods",
  data(){
    return{
      goods:[
        {
          title:"仙人掌",
          size:"叶片一般都是很饱满的,并且株型也很紧凑,植株看起来是很小巧的...",
          img:"/src/assets/a.png",
        },
        {
          title:"多肉植物",
          size:"叶片一般都是很饱满的,并且株型也很紧凑,植株看起来是很小巧的...",
          img:"src/assets/b.png",
        },
        {
          title:"多肉植物",
          size:"叶片一般都是很饱满的,并且株型也很紧凑,植株看起来是很小巧的...",
          img:"src/assets/c.png",
        },
        {
          title:"多肉植物",
          size:"叶片一般都是很饱满的,并且株型也很紧凑,植株看起来是很小巧的...",
          img:"src/assets/e.jpg",
        },
        {
          title:"多肉植物",
          size:"叶片一般都是很饱满的,并且株型也很紧凑,植株看起来是很小巧的...",
          img:"src/assets/a.png",
        },
        {
          title:"多肉植物",
          size:"叶片一般都是很饱满的,并且株型也很紧凑,植株看起来是很小巧的...",
          img:"src/assets/b.png",
        },
      ]
    }
    }
}

</script>

<style scoped>
.goods{
  display: flex;
  padding: 20px 15px;
  position: relative;
}
.fm{
  width: 60px;
  height: 60px;
  background-color: azure;
  border-radius: 5px;
  margin-right: 5px;
}
.goods{
  display: flex;
}
.startLi{
  display: flex;
  flex: 1;
}
.startLi .start{
  width: 10px;
  height: 10px;
  margin-right: 3px;
}

.t1{
  font-weight: bolder;
  font-size: 13px;
}
.t5{
  font-size: 12px;
}
</style>